<template>
  <div class="app-container">
    <h1>设置综合案例</h1>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs } from "vue";
import SoundMeter from "../../utils/soundmeter";
export default defineComponent({
  setup() {
    const state = reactive({
      visible: false,
      videoDevices: [],
      audioDevices: [],
      audioOutputDevices: [],
      resolution: "vga",
      selectedAudioDevice: "",
      selectedVideoDevice: "",
      audioLevel: 0,
    });
    onMounted(() => {
      if (window.localStorage) {
        let deviceInfo = localStorage["deviceInfo"];
        if (deviceInfo) {
          let info = JSON.parse(deviceInfo);
          state.selectedAudioDevice = info.audioDevice;
          state.selectedVideoDevice = info.videoDevice;
          state.resolution = info.resolution;
        }
      }
      try {
        window.AudioContext = window.AudioContext || window.webkitAudioContext;
        window.audioContext = new AudioContext();
      } catch (e) {
        console.log("网页音频API不支持");
      }
      updateDevices().then((data) => {
        if (state.selectedAudioDevice === "" && data.audioDevices.length > 0) {
          state.selectedAudioDevice = data.audioDevices[0].deviceId;
        }
        if (
          state.selectedAudioOutputDevice === "" &&
          data.audioOutputDevices.length > 0
        ) {
          state.selectedAudioOutputDevice = data.audioOutputDevices[0].deviceId;
        }

        if (state.selectedVideoDevice === "" && data.videoDevices.length > 0) {
          state.selectedVideoDevice = data.videoDevices[0].deviceId;
        }
        state.videoDevices = data.videoDevices;
        state.audioDevices = data.audioDevices;
        state.audioOutputDevices = data.audioOutputDevices;
      });
    });
    updateDevices = () => {
      return new Promise((resolve, reject) => {
        let videoDevices = [];
        let audioDevices = [];
        let audioOutputDevices = [];

        navigator.mediaDevices
          .enumerateDevices()
          .then((devices) => {
            for (let device of devices) {
              if (device.kind === "videoinput") {
                videoDevices.push(device);
              } else if (device.kind === "audioinput") {
                audioDevices.push(device);
              }
              if (device.kind === "audiooutput") {
                audioOutputDevices.push(device);
              }
            }
          })
          .then(() => {
            let data = { videoDevices, audioDevices, audioOutputDevices };
            resolve(data);
          });
      });
    };
    const soundMeterProcess = () =>{
        var val = (window.soundMeter.instant.toFixed(2) * 348) + 1;
        state.audioLevel=val;
        if(state.visible){
            setTimeout(this.soundMeterProcess,100);
        }
    }
    const closeMediaStream=(stream)=>{
      if(!stream){
        return;
      }
      var tracks,i,len;
      if(stream.getTracks){
        tracks=stream.getTracks()
        for(i=0,len=tracks.length;i<len;i+=1){
          tracks[i].stop();
        }
      }else{
        tracks=stream.getAudioTracks();
        for(i=0,len=tracks.length;i<len;i+=1){
          tracks[i].stop()
        }
        tracks=stream.getVideoTracks()
        for(i=0,len=tracks.length;i<len;i+=1){
          tracks[i].stop()
        }
      }
    }
    return {
      ...toRefs(state),
    };
  },
});
</script>
<style scoped>
.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>
